import React, {FC} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import icon_zhinan from "@/assets/img/icon_zhinan.png";
import icon_pingshu from "@/assets/img/icon_pingshu.png";
import icon_bingli from "@/assets/img/icon_bingli.png";
import icon_jiangzuo from "@/assets/img/icon_jiangzuo.png";
import HxScrollMenu from "@/components/HxScrollMenu";
import HxIcon from "@/components/HxIcon";
import {HxArticleSpecialItem} from '@/components/HxArticleItem';
import {useRequest} from "ahooks";
import * as API from "@/services";
import {queryFrontJournalSpecialTopics} from "@/services";

interface SpecialTypeOfArticlesProps {
}


interface SpecialTypeOfArticlesTypeProps {
  title: string;
  icon: React.ReactNode;
  children?: React.ReactNode;
}

const SpecialTypeOfArticlesType: FC<SpecialTypeOfArticlesTypeProps> = (props) => {
  return (
    <div className={"special-type-of-articles-type-container"}>
      <div className={"special-type-of-articles-type-header"}>
        <div className={"special-type-of-articles-type-icon"}>{props.icon}</div>
        <div className={"special-type-of-articles-type-title"}> {props.title}</div>
      </div>
      <div className={"special-type-of-articles-type-content"}>
        {props.children}
      </div>
    </div>
  );
};


const SpecialTypeOfArticles: FC<SpecialTypeOfArticlesProps> = (props) => {

  const dataReq = useRequest(() => API.queryFrontJournalSpecialTopics({
    pageSize: 100,
  }), {});

  const data = (dataReq.data?.data || []).filter((d,dinx) => d.articleList?.length > 0);

  return (
    <HxCyCard title={"特殊类型文章展示"} subtext={"Special type of articles"} className={"special-type-of-articles-type-card"}>
      <HxScrollMenu>
        {
          data.map((item, itemIndex) => {
            return (
              <SpecialTypeOfArticlesType key={item.id} title={item.name} icon={<img src={item.logo}/>}>
                {
                  item.articleList
                    .filter((article, articleIndex) => articleIndex < 5)
                    .map((article, articleIndex) => {
                      return (
                        <HxArticleSpecialItem key={article.id} article={article} showCover={articleIndex == 0}/>
                      );
                    })
                }
              </SpecialTypeOfArticlesType>
            );
          })
        }
        {/*<SpecialTypeOfArticlesType title={"指南"} icon={<img src={icon_zhinan}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"评述"} icon={<img src={icon_pingshu}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"病例"} icon={<img src={icon_bingli}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"讲座"} icon={<img src={icon_jiangzuo}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"图表"} icon={<HxIcon type={"hxicon-tubiao"}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"视频"} icon={<HxIcon type={"hxicon-video"}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>
        <SpecialTypeOfArticlesType title={"专家"} icon={<HxIcon type={"hxicon-zhuanjiajieshao"}/>}>
          <HxArticleSpecialItem showCover={true}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
          <HxArticleSpecialItem showCover={false}/>
        </SpecialTypeOfArticlesType>*/}
      </HxScrollMenu>
    </HxCyCard>
  );
};

export default SpecialTypeOfArticles;
